<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <div th:replace="common/common :: headblock('短地址管理')"></div>
  <!--  引入自定义CSS -->
  <!-- DataTables CSS -->
  <link rel="stylesheet" type="text/css" href="/jslib/DataTables-1.10.21/media/css/jquery.dataTables.css">
 
</head>

<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <div th:replace="common/common :: main-header"></div>
  
  <!-- Left side column. contains the logo and sidebar -->
  <div th:replace="common/common :: main-sidebar"></div>
  
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
  
    <!-- Content Header (Page header) -->
	<div th:replace="common/common :: content-header"></div>

    <!-- Main content -->
    <section class="content container-fluid">
		<!--第二步：添加如下 HTML 代码-->
		<table id="table_id_example" class="display">
		    <thead>
		        <tr>
		            <th>Id</th>
		            <th>keyworld</th>
		            <th>url</th>
		            <th>type</th>
		            <th>insertAt</th>
		            <th>updatedAt</th>
		            <th></th>
		        </tr>
		    </thead>
		    <tbody>
		    </tbody>
		</table>
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

  <!-- Main Footer -->
  <div th:replace="common/common :: main-footer"></div>

  <!-- Add the sidebar's background. This div must be placed
  immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- 引入通用javaScript -->
<div th:replace="common/common :: commonfooterjs"></div>
<!--  引入自定义javaScript -->


<!-- jQuery -->
<!-- 
<script type="text/javascript" charset="utf8" src="/jslib/DataTables-1.10.21/media/js/jquery.js"></script>
-->
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="/jslib/DataTables-1.10.21/media/js/jquery.dataTables.min.js"></script>

<script type="text/javascript" th:inline="none">

<!--第三步：初始化Datatables-->
$(document).ready( function () {
    //$('#table_id_example').DataTable();
    
    function getajaxAllData() {
        var table = $('#table_id_example').DataTable({
            language: {
                "decimal": "",//小数的小数位符号  比如“，”作为数字的小数位符号
                "emptyTable": "没有数据哟~~",//没有数据时要显示的字符串
                "info": "当前 _START_ 条到 _END_ 条 共 _TOTAL_ 条",//左下角的信息，变量可以自定义，到官网详细查看
                "infoEmpty": "无记录",//当没有数据时，左下角的信息
                "infoFiltered": "(从 _MAX_ 条记录过滤)",//当表格过滤的时候，将此字符串附加到主要信息
                "infoPostFix": "",//在摘要信息后继续追加的字符串
                "thousands": ",",//千分位分隔符
                "lengthMenu": "每页 _MENU_ 条记录",//用来描述分页长度选项的字符串
                "loadingRecords": "加载中...",//用来描述数据在加载中等待的提示字符串 - 当异步读取数据的时候显示
                "processing": "处理中...",//用来描述加载进度的字符串
                "search": "搜索",//用来描述搜索输入框的字符串
                "zeroRecords": "没有找到",//当没有搜索到结果时，显示
                "paginate": {
                    "first": "首页",
                    "previous": "上一页",
                    "next": "下一页",
                    "last": "尾页"
                }
            },
            processing: true,//是否显示处理状态(排序的时候，数据很多耗费时间长的话，也会显示这个)
            lengthChange: true,//是否允许用户改变表格每页显示的记录数
            lengthMenu:[[10, 25, 50, 100, -1], [10, 25, 50, 100, "所有"]],//设置每页显示数据条数的下拉选项
            ordering: true,//是否使用排序
            orderMulti: false,//是否启用多列排序
            order: [],//取消默认排序查询,否则复选框一列会出现小箭头
            stateSave: true,//记录cookie
            paging: true,//是否分页
            pageLength: 10, //默认分页为10
            pagingType: "full_numbers",//除首页、上一·页、下一页、末页四个按钮还有页数按钮
            searching: false,//是否开始本地搜索
            stateSave: false,//刷新时是否保存状态
            autoWidth: true,//自动计算宽度
            deferRender: true,//延迟渲染
            //scrollX： false, //横向x轴的扩展条
            //scrollY：200px, //竖向y轴的扩展条
            serverSide: true,//开启服务器模式
            //获取数据
            ajax: {
                url: "/findAllPageabe.do",
                type: 'GET',
                dataSrc: function(data){
                	console.log("data:" + data);
                	console.log("data1:" + JSON.stringify(data));
                    var json = data;                
                    //json.recordsTotal = json.totalElements;
                    //json.recordsFiltered = json.numberOfElements;
                    
                    json.recordsTotal = json.totalElements;
                    json.recordsFiltered = json.totalElements;

                    json.data = json.content;
                    console.log("json:" +json);
                    console.log("json1" + JSON.stringify(json));
                    return json.data;
                }
                //dataSrc: 'content',
                //绑定额外参数
                //data: {
                //	"currentPage":0,
                //	"pageSize":10
                //}
            },
            //设置数据
            columns: [
                {data: "id"},
                {data: "keyword"},
                {data: "url"},
                {data: "type"},
                {data: "insertAt"},
                {data: "updatedAt"}
            ],
            columnDefs : [
                {
                    // 定义操作列,######以下是重点########
                    "targets" : 6,//操作按钮目标列
                    "data" : null,
                    "render" : function(data, type,row) {
                        var id = row.id;
                        var html = '<p>'
                        html += '<button class="btn btn-primary btn-s" type="button" onclick="triggerjobFunction(\''+id+'\')">触发</button>';
                        html += '<button class="btn btn-primary btn-s" type="button" onclick="pausejobFunction(\''+id+'\')">暂停</button>';
                        html += '<button class="btn btn-primary btn-s" type="button" onclick="javascript:window.open(\'/gluejob/jobcode.html?jobId='+id+'\')">日志</button>';
                        html += '<br>';
                        html += '<button class="btn btn-warning btn-s" type="button" onclick="updatejobFunction(\''+id+'\')">更新</button>';
                        html += '<button class="btn btn-warning btn-s" type="button" onclick="javascript:window.open(\'/gluejob/jobcode.html?jobId='+id+'\')">GLUE</button>';
                        html += '<button class="btn btn-danger btn-s" type="button" onclick="deletejobFunction(\''+id+'\')">删除</button>';
                        html += '</p>';
                        //var html = "<a href='javascript:void(0);'  class='delete btn btn-default btn-xs'  ><i class='fa fa-times'></i> 查看</a>"
                        //html += "<a href='javascript:void(0);' class='up btn btn-default btn-xs'><i class='fa fa-arrow-up'></i> 编辑</a>"
                        //html += "<a href='javascript:void(0);'   onclick='deleteThisRowPapser("+ id + ")'  class='down btn btn-default btn-xs'><i class='fa fa-arrow-down'></i> 删除</a>"
                        return html;
                    }
                }
            ]
 
        });
    }
    
    getajaxAllData();

} );

</script>

</body>
</html>